<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

import { getDictAllData } from '@/services/dict'
import { useMemberStore } from '@/stores'
import { getDriverSetAPI, saveOrUpdateAPI, updateDriverAuthInfoAPI } from '@/services/home'
import { driverRegisterAPI } from '@/services/login'
import type { DeliverymanInfoDTO, DriverSetForm } from '@/types/home'
const { getUserInfo } = useMemberStore()
const { safeAreaInsets } = uni.getSystemInfoSync()
// 1. 定义表单数据
const formData: DriverSetForm = reactive({
  id: null,
  driverId: null,
  serviceStatus: null,
  orderDistance: '',
  acceptDistance: '',
  isAutoAccept: 0,
})

const rules: UniHelper.UniFormsRules = {}
const formRef = ref<UniHelper.UniFormsInstance>()

// 4. 提交方法
const submit = async () => {
  const res: any = await formRef.value?.validate?.()
  console.log('表单数据信息：', Object.assign(formData, res))

  const codeRes = await wx.login()
  const registerRes = await driverRegisterAPI({
    code: codeRes.code,
  })

  await updateDriverAuthInfoAPI({
    ...formData,
    ...res,
    openId: registerRes.data.openId,
  } as DeliverymanInfoDTO)

  uni.navigateTo({
    url:
      '/pages/register/face-model-create?openId=' +
      registerRes.data.openId +
      '&sessionKey=' +
      registerRes.data.sessionKey,
  })
}
const serviceStatusType = ref([] as any[])
onLoad(async () => {
  serviceStatusType.value = ((await getDictAllData('service_status_type')) as any[]).map(
    (item: any) => {
      return { value: Number(item.dictValue), text: item.dictLabel }
    },
  )

  console.log(serviceStatusType.value)

  // 详情
})

onShow(async () => {
  if (getUserInfo()?.id) {
    const driverSetData = await getDriverSetAPI(getUserInfo().id)
    Object.assign(formData, driverSetData.data)
    console.log('aa', formData)
  }
})
const serviceStatusTypeChanger = (e: any) => {
  // formData.serviceStatus = e.detail.value
}

const onSubmit = async () => {
  const res: any = await formRef.value?.validate?.()
  console.log('表单数据信息：', Object.assign(formData, res))

  await saveOrUpdateAPI({
    ...formData,
    ...res,
    driverId: getUserInfo().id,
  })

  uni.switchTab({
    url: '/pages/home/home',
  })
}
</script>

<template>
  <scroll-view
    scroll-y
    class="driver_set"
    :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
  >
    <view class="driver_set_form">
      <uni-forms ref="formRef" :model="formData" :rules="rules">
        <uni-forms-item name="serviceStatus" label="服务状态">
          <uni-data-select
            v-model="formData.serviceStatus"
            :localdata="serviceStatusType"
            @change="serviceStatusTypeChanger"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item name="username" label="订单里程设置">
          <uni-easyinput v-model="formData.orderDistance" placeholder="订单里程设置" />
        </uni-forms-item>
        <uni-forms-item name="acceptDistance" label="接单里程设置">
          <uni-easyinput v-model="formData.acceptDistance" placeholder="接单里程设置" />
        </uni-forms-item>
        <!-- 提交按钮 -->
        <view class="submit-button">
          <button class="submit-btn" @click="onSubmit">提交申请</button>
        </view>
      </uni-forms>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
page {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}
.driver_set {
  height: 100%;
  display: flex;
  flex-direction: column;

  .driver_set_form {
    padding: 32rpx;
  }
  .submit-button {
    padding: 32rpx;

    .submit-btn {
      width: 100%;
      height: 96rpx;
      background-color: $color;
      color: white;
      border: none;
      border-radius: 43rpx;
      font-size: $font-medium-size;
      line-height: 96rpx;
      text-align: center;
    }
  }
}
</style>
